@charset "utf-8";
/* CSS Document */
<!--css重置样式：-->
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, em, p, font, img, small, strong, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:12px;vertical-align:baseline;font-weight:normal;} 
ol, ul {list-style:none} :focus {outline:none; } 
table {border-collapse:collapse;border-spacing: 0;} 
caption, th, td { text-align: left; font-weight: normal;} 
strong {font-weight:600;} 
a{font:12px Arial;text-decoration:none;color:#404040;cursor:pointer;} 
a:hover{text-decoration:underline;color:#FF3300;} 
h1{font-size:16px;font-weight:600;color:#000;}
*{font-family:"微软雅黑";font-size: 62.5%;}
body{
	min-width:1000px;
	width:100%;
	position: relative;

}

header{
	background:url(../images/banner.jpg) top center no-repeat;
	position: relative;
    z-index: 1;

	width:100%;
	
	}
nav{
	z-index:998;
	height:40px;
	width:100%;
	position:fixed;
	
	top:0;
	bottom:0;
	}
.nav1 h1{float:left;line-height:40px;margin-left:40px;color:#fff;font-size:18px;font-weight:normal;}
.menu-h3{cursor:pointer;float:right;line-height:40px;width:90px;margin-right:40px;text-align:right;font-size:16px;color:#fff;background:url(../images/setting.png) no-repeat 10px;padding-right:10px;}
/*.menu-h3:hover{background:#1bbcab;width:60px;cursor:pointer;}*/
.acitive{background:#1bbcab;width:90px;border-radius:45px;text-align:center;cursor:pointer;}
.setting{z-index:9990;position:fixed;background:#1bbcab;min-width:17%;height:100%;top:0px;padding:10px 0 0 0px;}
.setting ul li,.setting ul li a{margin-top:10px;color:#fff;font-size:14px;}
.setting ul li{list-style-image:url(../images/my_li_bg.png);margin-left: 20px;}
.setting ul li a:hover{color:#f90;}
.setting ul {margin-top:20px;}
.setting span{font-size:25px;color:#fff;margin-left: 10px;}
.setting button{margin:0 5px 0 0;float:right;border-radius:15px;color:#1bbcab;background:#fff;border:none;width:30px;height:30px;font-size:18px;}
.setting button:hover{background:#F60;color:#fff;}
.name1{text-align:center;margin-top:300px;height:400px;}
.hr{border-top:2px solid rgba(255,255,255,0.6);width:150px;margin:0 auto;}
.name1 h1{font-size:20px;color:#fff;margin:10px 0;}
.name1 p{font-size:18px;padding-top:30px;color:#fff;width:300px;margin:0 auto;}
.name1 button{width:150px;height:40px;;background:#F90;border:none;color:#fff
;font-size:18px;margin-top:30px;border-radius:5px;}
.name1 button:hover{background:#F60;}
header .more{margin-top:200px;text-align:center;font-size:16px;color:#fff;height:300px;}
header #more-img{cursor:pointer;}
.bg{background:rgba(0,0,0,0.3);height:100%;overflow:hidden;}
<!--content部分-->
.wapper{max-width:1080px;margin:0 auto;}
.wapper .hr{width:50%;}
h2{margin:50px 0 30px 0;font-size:25px;}
.wapper p{margin:30px 0 0 0;font-size:20px;}
.green-sec{background:#078494;text-align:center;padding:100px 0;color:#fff;}
.green-sec .icon span{display:inline-block;width:80px;height:80px;border:1px solid #2F9EAC;margin:60px 40px 0 0;transform:rotate(45deg);}

.img-sec{background:#252f34;overflow:hidden;}
.img-sec,.pic-sec{}
.img-sec .imgage-sec{width:45%;float:left;font-size:0;}
.imgage-sec img{width:100%;}
.article{overflow:hidden;}
.img-sec .text-sec{color:#fff;width:55%;float:left;position:relative;z-index:0;top:80px;left:50px;}
.img-sec .text-sec h2{font-size:2em;}
.img-sec .text-sec h3{font-size:1.5em;margin-top:15px;}
.img-sec .text-sec p{margin-top:10px;letter-spacing:1px;font-size: 1em;}
.img-sec .text-sec > *{max-width:90%;}
.article:nth-child(odd){
	background:rgba(255,255,255,0.05);
	}
.pic-sec{background:#515294;mix-height:800px;overflow:hidden;}
.pic-sec .heading{text-align:center;color:#fff;padding:30px 0 20px 0}
.heading h2{margin:50px 0 30px 0;font-size:25px;}
.article-sec{width:60%;margin:0 auto;overflow:hidden;}
.heading .hr{width:100px;}
.heading p{margin:30px 0 20px 0;font-size:15px;}
.article-sec{}
.pic-sec .article2{color:#fff;background:#C30;width:50%;float:left;min-height:300px;
padding:20px;
box-sizing:border-box;
-webkit-box-sizing:border-box;}
.pic-sec .article2 p{font-size:15px;}
.pic-sec .article2:nth-child(1){background:rgba(0,0,0,0.08)}
.pic-sec .article2:nth-child(2){background:rgba(0,0,0,0.05)}
.top{position:fixed;display:none;right:30px;bottom:30px;width:60px;height:60px;background:url(../images/huidaotop.png) no-repeat;}
.top:hover{background-position-y:-60px;}
.hjc
{
position:relative;
animation-name:myfirst;
animation-duration:0.8s;
animation-iteration-count:1;
animation-timing-function:linear;
animation-delay:0s;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:0.8s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:linear;
-moz-animation-delay:0s;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:0.8s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:0.8s;
-o-animation-timing-function:linear;
-o-animation-delay:0s;
-o-animation-iteration-count:1;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes myfirst
{
0%   {width:0}
25%  {width:50px;}
50%  {width:100px}
75%  {width:150px}
100% {width:150px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {width:0}
25%  {width:50px;}
50%  {width:100px}
75%  {width:150px}
100% {width:150px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {width:0}
25%  {width:50px;}
50%  {width:100px}
75%  {width:150px}
100% {width:150px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {width:0}
25%  {width:50px;}
50%  {width:100px}
75%  {width:150px}
100% {width:150px;}
}

.more
{
display: block;
position:relative;
animation: mytwo 1s linear 2s normal forwards;
	/* Firefox: */
    -moz-animation: mytwo 1s linear 2s normal forwards;
    /* Safari 和 Chrome: */
    -webkit-animation: mytwo 1s linear 2s normal forwards;
    /* Opera: */
    -o-animation: mytwo 1s linear 2s normal forwards;
}

@keyframes mytwo
{
0%   {margin-top:10px;}
25%  {margin-top:15px;}
50%  {margin-top:20px;}
75%  {margin-top:25px;}
100% {margin-top:30px;}
}

@-moz-keyframes mytwo /* Firefox */
{
0%   {margin-top:10px;}
25%  {margin-top:15px;}
50%  {margin-top:20px;}
75%  {margin-top:25px;}
100% {margin-top:30px;}
}

@-webkit-keyframes mytwo /* Safari and Chrome */
{
0%   {margin-top:10px;}
25%  {margin-top:15px;}
50%  {margin-top:20px;}
75%  {margin-top:25px;}
100% {margin-top:30px;}
}

@-o-keyframes mytwo /* Opera */
{
0%   {margin-top:10px;}
25%  {margin-top:15px;}
50%  {margin-top:20px;}
75%  {margin-top:25px;}
100% {margin-top:30px;}
}

.my33
{
background-color:#1bbcab;
border-radius:45px;
animation-name:mythree;
animation-duration:0.5s;
animation-iteration-count:1;
animation-timing-function:linear;
animation-delay:0s;
animation-direction:normal;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mythree;
-moz-animation-duration:0.5s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:linear;
-moz-animation-delay:0s;
-moz-animation-direction:normal;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mythree;
-webkit-animation-duration:0.5s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:mythree;
-o-animation-duration:0.5s;
-o-animation-timing-function:linear;
-o-animation-delay:0s;
-o-animation-iteration-count:1;
-o-animation-direction:normal;
-o-animation-play-state:running;
}

@keyframes mythree
{
0%   {width:70px;}
25%  {width:75px;}
50%  {width:80px;}
75%  {width:85px;}
100% {width:90px;}
}

@-moz-keyframes mythree /* Firefox */
{
0%   {width:70px;}
25%  {width:75px;}
50%  {width:80px;}
75%  {width:85px;}
100% {width:90px;}
}

@-webkit-keyframes mythree /* Safari and Chrome */
{
0%   {width:70px;}
25%  {width:75px;}
50%  {width:80px;}
75%  {width:85px;}
100% {width:90px;}
}

@-o-keyframes mythree /* Opera */
{
0%   {width:70px;}
25%  {width:75px;}
50%  {width:80px;}
75%  {width:85px;}
100% {width:90px;}
}
.body-bg{
	animation: bg2 1s linear 0s normal forwards;
	/* Firefox: */
    -moz-animation: bg2 1s linear 0s normal forwards;
    /* Safari 和 Chrome: */
    -webkit-animation: bg2 1s linear 0s normal forwards;
    /* Opera: */
    -o-animation: bg2 1s linear 0s normal forwards;
}
@keyframes bg2
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-moz-keyframes bg2 /* Firefox */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-webkit-keyframes bg2 /* Safari and Chrome */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-o-keyframes bg2 /* Opera */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}


.body-bg3{
	animation: bg3 0.5s linear 0s normal forwards;
	/* Firefox: */
    -moz-animation: bg3 0.5s linear 0s normal forwards;
    /* Safari 和 Chrome: */
    -webkit-animation: bg3 0.5s linear 0s normal forwards;
    /* Opera: */
    -o-animation: bg3 0.5s linear 0s normal forwards;
}
@keyframes bg3
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-moz-keyframes bg3 /* Firefox */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-webkit-keyframes bg3 /* Safari and Chrome */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}

@-o-keyframes bg3 /* Opera */
{
0%   {background:rgba(48,72,93,0.15);}
25%  {background:rgba(48,72,93,0.3);}
50%  {background:rgba(48,72,93,0.45);}
75%  {background:rgba(48,72,93,0.6);}
100% {background:rgba(48,72,93,0.75);}
}